<template>
<div class="container">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>添加频道管理</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
    </div>
    <el-form ref="form" :model="addForm" label-width="140px">
      <el-form-item label="频道名称">
        <el-input v-model="addForm.name" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          action="/oss/img"
          :file-list="fileList"
          list-type="picture-card"
          name="object"
          :on-success="uploadSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="this.dialogImg" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="状态" >
        <el-radio-group v-model="addForm.stauts">
          <el-radio :label="1">激活</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</template>

<script>
import { addChannelList, getChannelAll } from '@/api/channel'

export default {
  name: 'addChannel',
  data(){
    return{
      addForm:{},
      channels:[],
      fileList:[],
      dialogVisible:false,
      dialogImg:"",
    }
  },
  created() {
    //获取频道列表信息
    this.channels = getChannelAll().then(res => {
      console.log('this.channels', res.data)
      this.channels = res.data
    })
  },
  methods:{
    back(){
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.push('/tweet/channel')
    },
    //  图片上传成功时的回调
    uploadSuccess(file, fileList) {
      this.fileList.push({ url: fileList.response.data })
    },
    // 移除上传图片数据
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImg = file.url
    },
    onSubmit(){
      addChannelList({
        name:this.addForm.name,
        images:this.fileList.map(item=>item.url).join(','),
        stauts:this.addForm.stauts
      }).then(res=>{
        this.$message.success('添加成功')
        this.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 20px;
}
</style>
